<template>
  <view class="familyEdit allColumnCenter">
    <header-title ref="headerTitle" isDisplayBack title="家庭管理" is-fixed background="#f5f5f5"
                  @getPageHeight="getPageHeight"></header-title>
    <view :style="{height:`${headerHeight}px`}"></view>
    <single-gap margin="25rpx 0 0 0" title="家庭名称" @elementClick="elementClick">
      <view class="familyEdit_familyName row items-center justify-between">
        <view class="familyEdit_familyName_left">
          <text class="familyEdit_familyName_left_text">{{ info.name }}</text>
        </view>
        <image class="familyEdit_familyName_image" src="/static/shiqin-images/arrow_right.png" mode="widthFix"></image>
      </view>
    </single-gap>
    <single-gap margin="25rpx 0 0 0" title="家庭号">
      <view class="familyEdit_familyName row items-center justify-between">
        <view class="familyEdit_familyName_left">
          <text class="familyEdit_familyName_left_text">{{ info.code }}</text>
        </view>
      </view>
    </single-gap>
    <single-gap margin="25rpx 0 0 0" title="分享家庭">
      <view class="familyEdit_familyName row items-center justify-end">
        <image class="familyEdit_familyName_code mr-35" src="/static/shiqin-images/qrcode.png" mode="widthFix"></image>
        <image class="familyEdit_familyName_share" src="/static/shiqin-images/share.png" mode="widthFix"></image>
      </view>
    </single-gap>
    <members-list is-search margin="25rpx 0 0 0" title="发起人" :list="sponsorList" :index="0"></members-list>
    <members-list margin="25rpx 0 0 0" title="管理员" :list="administratorList" :index="1"></members-list>
    <members-list margin="25rpx 0 0 0" title="仅查看" :list="viewOnlyList" :index="2"></members-list>
    <view class="familyEdit_bottomBtn allRowCenter mt-94 mb-74">
      <text class="familyEdit_bottomBtn_text">退出/删除家庭</text>
    </view>

    <first_popup ref="firstPopup">
      <view class="familiesList_popupContent mt-91 allRowCenter">
        <input type="text" v-model="familyName" placeholder="请填写家庭名称" style="text-align: center"
               placeholder-class="familiesList_popupContent_placeholder">
      </view>
    </first_popup>
  </view>
</template>

<script>
import HeaderTitle from "../../components/shiqinComponents/pageComponents/headerTitle.vue";
import SingleGap from "../../components/shiqinComponents/shiqin_pageGap/singleGap.vue";
import MembersList from "./components/membersList.vue";
import First_popup from "../../components/shiqinComponents/shiqin_globalPopUps/first_popup.vue";
import {getFamilyMemberListDateils} from "../../api/shiqinAPI";

export default {
  components: {First_popup, MembersList, SingleGap, HeaderTitle},
  data() {
    return {
      // 头部高度
      headerHeight: 0,
      info: {
        name: '',
        code: ''
      },
      sponsorList: [],
      administratorList: [],
      viewOnlyList: [],
      familyName: '',
      options: {},
      familyDetailParam: {
        page: 1,
        pagesize: 10,
        total: 0,
        family_id: ''
      }
    };
  },
  onLoad(options) {
    console.log(options)
    this.options = options
    this.info.code = options.code
    this.getFamilyDetail(this.options.family_id)
  },
  onReady() {
    this.$nextTick(() => {
      this.$refs.headerTitle.getPageHeight()
    })
  },
  methods: {
    getPageHeight(number) {
      this.headerHeight = number
    },
    elementClick() {
      this.familyName = this.info.name
      this.$refs.firstPopup.openPopup({
        title: '修改家庭名称',
        maskClick: false,
        confirm: () => {
          if (!this.familyName) {
            uni.showToast({
              title: '家庭名称尚未填写',
              icon: 'none'
            })
            return
          }
          this.$refs.firstPopup.closePopup()
          this.familyName = ''
        }
      })
    },
    // 获取当前家庭详情
    async getFamilyDetail(family_id) {
      this.familyDetailParam.family_id = family_id
      let {data} = await getFamilyMemberListDateils(this.familyDetailParam)
      this.info.name = data.name
      data.list.data.forEach(item => {
        if (item.authority == 2) {
          this.sponsorList.push(item)
        } else if (item.authority == 1) {
          this.administratorList.push(item)
        } else {
          this.viewOnlyList.push(item)
        }
      })
    }
  },
}
</script>

<style lang="scss">
.familyEdit {
  width: 750rpx;
  min-height: 100vh;
  background: $secondaryPages;

  .familyEdit_familyName {
    width: 486rpx;

    .familyEdit_familyName_left {
      .familyEdit_familyName_left_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #9F9F9F;
      }
    }

    .familyEdit_familyName_image {
      width: 25rpx;
    }

    .familyEdit_familyName_code {
      width: 23rpx;
    }

    .familyEdit_familyName_share {
      width: 38rpx;
    }
  }

  .familyEdit_bottomBtn {
    width: 470rpx;
    height: 80rpx;
    background: #F5F5F5;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    border: 2rpx solid #A0A0A0;

    &_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #A0A0A0;
    }
  }

  .familiesList_popupContent {
    width: 484rpx;
    height: 80rpx;
    background: #FFFFFF;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    border: 2rpx solid #707070;

    .familiesList_popupContent_placeholder {
      font-weight: 500;
      font-size: 30rpx;
      color: #A0A0A0;
    }
  }
}
</style>
